<!DOCTYPE HTML >
    <html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
      <script language="JavaScript" src = '../js/java.js'></script>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #btn3{
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            .content{
                width: 600px;
                height: 440px;
                border: 1px solid #b7bec1;
                margin: 0 auto;
            }
            .content .up{
                width:600px;
                height: 39px;
                border-bottom: 1px solid #b7bec1;
            }
            .content .left{
                width: 199px;
                height: 399px;
                float: left;
                border-right:1px solid #b7bec1;
            }
            .content .left .litem{
                width: 200px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-bottom: 1px solid #b7bec1;
            }
            .content .center{
                width: 199px;
                height: 399px;
                float: left;
                border-right:1px solid #b7bec1;
                text-align: center;
            }
            .content .center #btn1{
                width: 100px;
                height: 40px;
                font-size: 24px;
                margin-top: 100px;
            }
            .content .center #btn2{
                width: 100px;
                height: 40px;
                font-size: 24px;
                margin-top: 60px;

            }
            .content .right{
                width: 200px;
                height: 400px;
                float: left;

            }
            .content .right .litem{
                width: 200px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-bottom: 1px solid #b7bec1;
            }
            #bdiv{
                width:100%;
                height:100%;
                background-color: #b7bec1;
                opacity: 0.8;
                position: absolute;
                top:0;
                color: black;
                display: none;
            }
            #bdiv  #sdiv{
                width: 400px;
                height: 200px;
                margin: 100px auto;
                background-color: #4A4A51;
                position: relative;
            }
            #bdiv  #sdiv #more{
                position: relative;
                height:40px;
                line-height: 40px;
                font-size: 24px;
                background-color: #6f6d73;
            }
            #bdiv  #sdiv #small{
                position: absolute;
                width: 30px;
                height:30px;
                line-height: 30px;
                text-align: center;
                color: red;
                top:5px;
                right: 0;
                font-size: 24px;
                border:1px solid #d4d1dc;
            }
        </style>
        <script>
            var $ = function (s) {
               return document.getElementById(s);
            };
            var $list = function (a) {
               return document.getElementsByClassName(a);
            };
            var  select;
            var friends = ["1","2","3"];
            window.onload= function () {

                var add= function (name) {
                    //添加div
                   var div= document.createElement('div');
                   div.textContent = name;
                   div.className = 'litem';
                   //添加div里的删除功能
                    var x= document.createElement('span');
                    x.style.float = 'right';
                    x.style.marginRight = '5px';
                    x.style.cursor = 'pointer';
                    x.textContent = 'x';
                    x.title = '删除';

                    x.onclick = function () {
                        if (confirm('你是否要删除？')){
                            $('liv').removeChild(this.parentNode)
                        }
                    };
                    div.appendChild(x);
                    //div的点击事件
                    div.onclick = function () {
                        if ( null != select ){
                            select.style.backgroundColor = "";
                        }
                        this.style.backgroundColor = "#9ab4ef";
                        select = this;
                    };
                    return div;
                };
                //
                for (var i= 0; i<friends.length;i++){
                    var dd =add(friends[i]);
                    $('liv').appendChild(dd);
                }
                //先添加一个大的div




               $('btn3').onclick = function () {
                  win(300,400,"新增好友");
                };
                //btn1 的点击事件
                $("btn1").onclick =function () {

                    if(null == select){
                        alert("还没有选择对象");
                    }else{
                        $('riv').appendChild(select);
                        select.style.backgroundColor = '';
                        select = null;
                    }

                };
                //btn2的点击事件
                $("btn2").onclick =function () {

                    if(null == select){
                        alert("还没有选择对象");
                    }else{
                        $('liv').appendChild(select);
                        select.style.backgroundColor = '';
                        select = null;
                    }

                };
            };
        </script>

    </head>
    <body scroll="no">
    <div style='width: 600px;height: 40px;margin: 0 auto'>
    <button id="btn3" style=''>新增好友</button>
    </div>
    <div class='content'>

        <div id='top' class='up' >

        </div>
        <div id='liv' class='left'>
        </div>
        <div class='center'>
            <button id='btn1' > > </button>
            <button id='btn2'> < </button>
        </div>
        <div  id="riv" class='right'> </div>

    </div>
    <!--<div id='bdiv'>-->
        <!--<div id='sdiv' >-->

            <!--<div id='more'>-->
                <!--<div style='position: absolute;width: 360px;left: 0'> 添加好友 </div>-->
            <!--</div>-->
            <!--<div id='small'>-->
                <!--x-->
            <!--</div>-->
            <!--<div style='height: 80px;line-height: 80px;font-size: 22px;'>-->
                <!--<label>请输入好友名称  <input id='txt' type="text"/></label>-->
            <!--</div>-->
            <!--<div style='height: 40px;'>-->
                <!--<button id= 'yes' style='width: 80px;height: 40px;font-size: 20px;'>确认</button>-->
                <!--<button id= 'no' style='width: 80px;height: 40px;font-size: 20px;'>取消</button>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    </body>
    </html>